<template>
  <div class="container">
    <div class="discrib">
      <div class="left">
        <div class="txt">请在菜单中选择浏览器中打开，<br />以完成支付</div>
        <div class="broswer">
          <img v-if="systemType === 'ios'" src='../../assets/img/icon-safari.png' />
          <img v-if="systemType === 'andriod'" src='../../assets/img/icon-browser.png' />
        </div>
      </div>
      <div class="right">
        <img src='../../assets/img/icon-righttop.png' />
      </div>
    </div>
    <div class="gotobest">
      <div class="gobtn" @click="toToBest">回商城首页</div>
    </div>
  </div>
</template>

<script>
import { getBrowserType, getSystemType } from '../../utils'

export default {
  name: 'ToAlipay',
  data() {
    return {
      browserType: '',
      systemType: '',
    }
  },
  async mounted() {
    // 获取浏览器类型
    this.browserType = getBrowserType()
    this.systemType = getSystemType()
    if(this.browserType === ''){
      let orderId = this.$route.query.orderId
      let payAmout = this.$route.query.payAmout
      this.$router.push({
        path: '/pay',
        query: {
          orderId,
          payAmout,
          way: 'toalipay'
        }
      })
    }
  },
  methods: {
    toToBest(){
      this.$router.push('/best')
    }
  },
}
</script>

<style scoped>
.discrib{
  float: right;
  display: flex;
}
.discrib .left{
  padding-top: 58px;
  color: #333;
}
.discrib .left .broswer img{
  margin-top: 10px;
  width: 160px;
}
.discrib .right img{
  height: 80px;
}
.gotobest{
  clear: both;
  padding-top: 150px;
}
.gotobest .gobtn{
  margin: 0 auto;
  width: 80%;
  line-height: 50px;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  background-color: #d50721;
}
</style>